import React from "react";
import { Text, TouchableHighlight, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { MenuItemProps } from "./types";
import styles from "./index.styles";
import { useTheme } from "@/contexts/ThemeContext";

interface MenuItemComponentProps extends MenuItemProps {
  onPress: () => void;
  style?: any;
  textStyle?: any;
}

/**
 * 菜单项组件
 */
const MenuItem: React.FC<MenuItemComponentProps> = ({
  label,
  icon,
  color,
  disabled = false,
  onPress,
  style,
  textStyle,
}) => {
  const { colors } = useTheme();

  const handlePress = () => {
    if (!disabled) {
      onPress();
    }
  };

  const iconColor = color || colors.text.primary;
  const textColor = color || colors.text.primary;

  return (
    <TouchableHighlight
      underlayColor={colors.border.divider}
      onPress={handlePress}
      disabled={disabled}
    >
      <View
        style={[styles.menuItem, disabled && styles.menuItemDisabled, style]}
      >
        {typeof icon === "string" && (
          <View style={styles.icon}>
            <Ionicons name={icon as any} size={20} color={iconColor} />
          </View>
        )}
        <Text
          style={[
            styles.text,
            { color: disabled ? colors.text.disabled : textColor },
            textStyle,
          ]}
          numberOfLines={1}
        >
          {label}
        </Text>
      </View>
    </TouchableHighlight>
  );
};

export default MenuItem;
